<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="32%"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="分类级别" prop="recordTypeName">
            <el-radio-group v-model="dataForm.isTop">
              <el-radio :label="0">一级分类</el-radio>
              <el-radio :label="1">其他分类</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            label="上级选择"
            v-if="dataForm.isTop == 1"
            prop="parentCid"
          >
            <recordTypeCascader
              :paths.sync="dataForm.paths"
            ></recordTypeCascader>
          </el-form-item>

          <el-form-item label="分类名称" prop="recordTypeName">
            <el-input
              v-model="dataForm.recordTypeName"
              placeholder="分类名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="说明" prop="describes">
            <el-input
              type="textarea"
              v-model="dataForm.describes"
              placeholder="说明"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import recordTypeCascader from "./recordtype-cascader"; //导入组件后,新命名组件名

export default {
  data() {
    //自定义校验 不是顶级时，父ID不为空  参数(校验规则 ,当前的值, 成功失败的回调)
    function validatePid(rule, value, callback, vc) {
      if (vc.dataForm.isTop === 0 || vc.parentCid) {
        callback();
      } else {
        callback(new Error("上级分类需要选择"));
      }
    }

    return {
      visible: false,
      dataForm: {
        id: 0,
        recordTypeName: "",
        recordTypeLevel: 0,
        isTop: 0,
        parentCid: "",
        paths: [],
        showStatus: "",
        describes: "",
      },
      dataRule: {
        recordTypeName: [
          { required: true, message: "分类名称不能为空", trigger: "blur" },
        ],
        parentCid: [
          {
            validator: (rule, value, callback) => {
              validatePid(rule, value, callback, this);
            },
            trigger: "blur",
          },
        ],
        showStatus: [
          { required: true, message: "0 展示 1 隐藏不能为空", trigger: "blur" },
        ],
      },
    };
  },
  components: {
    recordTypeCascader,
  },
  methods: {
    //0 新增 1 修改
    init(id, type) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(
              `/product/word/recordtype/info/${this.dataForm.id}`
            ),
            method: "get",
            params: this.$http.adornParams({
              type: type, //新增显示本身层级， 修改显示父级别
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              let path = data.data.path;

              if (type == 0) {
                this.dataForm.id = 0;
                this.dataForm.isTop = 1;
                this.dataForm.paths = path;
                this.dataForm.parentCid = this.parentCid;
              } else {
                this.dataForm.recordTypeName = data.data.recordTypeName;
                this.dataForm.parentCid = data.data.parentCid;
                this.dataForm.recordTypeLevel = data.data.recordTypeLevel;
                this.dataForm.showStatus = data.data.showStatus;
                this.dataForm.isTop = data.data.recordTypeLevel == 1 ? 0 : 1;
                this.dataForm.paths = path.slice(0, -1); // 1 的时候保留删除最后一个元素
                this.dataForm.describes = data.data.describes;
              }
            }
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      console.log("表单： ", this.dataForm);

      this.$refs["dataForm"].validate((valid) => {
        // if (1 != 1) {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/product/word/recordtype/${
                !this.dataForm.id ? "save" : "update"
              }`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              recordTypeName: this.dataForm.recordTypeName,
              parentCid: this.parentCid,
              recordTypeLevel: this.recordTypeLevel,
              showStatus: this.dataForm.showStatus,
              describes: this.dataForm.describes,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
  computed:{
    recordTypeLevel(){
      let paths = this.dataForm.paths;
      let level = !this.dataForm.isTop && paths ? 1 : paths.length + 1;
      return level;
    },
    parentCid(){
      //pop() 方法用于从数组中删除并返回最后一个元素。
      let lastId = this.dataForm.paths.slice(-1)[0];
      let pid = !this.dataForm.isTop ? 0 : lastId;
      return pid;
    }
  }
};
</script>


<style>
input[aria-hidden="true"] {
  display: none !important;
}

.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none;
}
</style>

